import React, { FC, useContext, useState, ChangeEvent } from "react";
import { reeducerContext } from "./table";
const TableForm: FC = () => {
  const { state, dispatch } = useContext(reeducerContext);
  const [id, setid] = useState("");
  const [name, setname] = useState("");
  const idhandle = (e: ChangeEvent<HTMLInputElement>) => {
    setid(e.target.value);
  };
  const namehandle = (e: ChangeEvent<HTMLInputElement>) => {
    setname(e.target.value);
  };
  const submithandle = () => {
    console.log({ id, name });
    dispatch({
      type: "add",
      payload: { id, name },
    });
    setid("");
    setname("");
  };
  return (
    <>
      <div>
        <label htmlFor="id">id:</label>
        <input type="text" id="id" value={id} onChange={idhandle} />
        <label htmlFor="name">名字</label>
        <input type="text" id="name" value={name} onChange={namehandle}></input>
        <button onClick={submithandle}>提交</button>
      </div>
    </>
  );
};

export default TableForm;
